<template>
    <div class="centermsg">
        <div class="titlebox1">
            <div class="titleone">
                <img class="w-24-h-20 mg-r-10" src="./assets/img/left.png" alt="">
                <div class="fs-24 fc-ffffff fw-700">销售总额</div>
                <div v-for="(item, i) in totlenum1" :key="i">
                    <div class="chunk" style="margin-right: -16px;" v-if="Number(item) === Number(item)">
                        <div class="chunknum">{{ item }}</div>
                    </div>
                    <div v-else style="margin-left: 6px;" class="punctuation">{{ item }}</div>
                </div>
                <img class="w-24-h-20 mg-l-10" src="./assets/img/right.png" alt="">
            </div>
        </div>
        <div class="titlebox2">
            <div class="border-out">
                <div class="border-inner">
                    <img class="w-24-h-20 mg-r-20" src="./assets/img/left.png" alt="">
                    <div class="fs-16 fc-ffffff mg-r-16" style="color: rgba(255, 255, 255, .8);">上月销售总额</div>
                    <div v-for="(item, i) in totlenum2" :key="i">
                        <div class="fs-30 fc-ffffff">{{ item }}</div>
                    </div>
                    <img class="w-24-h-20 mg-l-20" src="./assets/img/right.png" alt="">
                </div>
            </div>
        </div>
        <div class="map" ref="chartRef">
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'
import { formatCurrency } from '../../../utils/utils'
// import { formatter } from 'element-plus'
import { ref, watch, onMounted } from 'vue'
// import { useRoute, useRouter } from 'vue-router'
import { getBiMapDataApi } from '@/api/visualization/visualization'
import type { MapDataDto } from '@/api/visualization/types'
import { base64img } from './base64'

// const router = useRouter()
// const route = useRoute()

export interface PointerDataDto {
    name: string
    value: string | number
}

const props = defineProps({
    msg: {
        type: Object,
        required: true,
    },
})
watch(() => props.msg, (New, Old) => {
    if (New) {
        console.log(New, 'title信息')
        totlenum1.value = formatCurrency(New.thisDateQuota, '', 2)
        totlenum2.value = formatCurrency(New.compareDateQuota, '', 2)
    }
}, {
    immediate: true
})

const totlenum1 = ref('')
const totlenum2 = ref('')

const biMapData = ref([] as MapDataDto[])

let myChart = null as ECharts | null
const chartRef = ref(null)
const setOption = async (mapData: MapDataDto[]) => {
    myChart?.resize()
    const res = await axios.get(`./map-geojson/${'china'}.json`)
    console.log(res, 'dgsuhghsuyghuy')
    echarts.registerMap('china', res.data)
    const pointData = [] as PointerDataDto[]
    var geoCoordMap: any = {}
    for (var i = 0; i < mapData.length; i++) {
        var geoCoord = geoCoordMap[mapData[i].area]
        if (geoCoord) {
            pointData.push({
                name: mapData[i].name as string,
                value: geoCoord.concat(mapData[i].value),
            })
        }
    }
    myChart?.setOption(
        {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                // show: true,
                right: '10%',
                top: 1,
                bottom: '0%',
                left: '0%',
            },
            geo: [
                {
                    map: 'china',
                    zlevel: -1,
                    zoom: 1,
                    silent: true,
                    layoutCenter: ['50%', '50%'],
                    layoutSize: '100%',
                    roam: false,
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(192,245,249,.8)',
                            borderWidth: 3,
                            shadowColor: '#6FFDFF',
                            shadowOffsetY: 0,
                            shadowBlur: 10,
                            // areaColor: 'rgba(29,85,139,.6)',
                        },
                    },
                    label: {
                        normal: {
                            //静态的时候展示样式
                            show: false, //是否显示地图省份得名称
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                                fontFamily: 'Arial',
                            },
                        },
                        emphasis: {
                            //动态展示的样式
                            show: false,
                            color: '#fff',
                        },
                    },
                },
                {
                    show: true,
                    map: 'china',
                    zoom: 1,
                    layoutCenter: ['50%', '50%'],
                    layoutSize: '100%',
                    label: {
                        show: true,
                        normal: {
                            //静态的时候展示样式
                            show: false, //是否显示地图省份得名称
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                                fontFamily: 'Arial',
                            },
                        },
                        emphasis: {
                            //动态展示的样式
                            color: '#fff',
                        },
                    },

                    blur: {
                        label: { show: true, color: '#000' },
                    },
                    roam: false, // 是否开启鼠标滚轮缩放
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                color: '#fff',
                            },
                            color: '#fff',
                            borderColor: '#32CBE0',
                            borderWidth: 1.5,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 1000,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0.5,
                                        color: '#0D59C1', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#53C9C7', // 100% 处的颜色
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff',
                            },
                            borderWidth: 3,
                            borderColor: 'rgba(255, 230, 175,0.8)',
                            shadowColor: 'rgba(255, 230, 175,0.5)',
                            shadowBlur: 30,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                                backgroundColor: 'transparent',
                            },
                            areaColor: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: '#1cfbfe',
                                    },
                                    {
                                        offset: 1,
                                        color: '#3348e7',
                                    },
                                ],
                                false
                            ),
                        },
                    },
                },
                {
                    type: 'map',
                    map: 'china',
                    zlevel: -2,
                    zoom: 1,
                    layoutCenter: ['50%', '51.4%'],
                    layoutSize: '100%',
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(35, 161, 184,0.5)',
                            shadowColor: 'rgba(35, 161, 184,0.8)',
                            shadowOffsetY: 5,
                            shadowBlur: 15,
                            areaColor: '#257AB2',
                        },
                    },
                },
                {
                    type: 'map',
                    map: 'china',
                    zlevel: -3,
                    zoom: 1,
                    layoutCenter: ['50%', '52.4%'],
                    layoutSize: '100%',
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(7, 65, 117,0.5)',
                            shadowColor: 'rgba(7, 65, 117,0.8)',
                            shadowOffsetY: 15,
                            shadowBlur: 8,
                            areaColor: '#0A2763',
                        },
                    },
                },
            ],
            series: [
                {
                    type: 'map',
                    layoutCenter: ['50%', '50%'],
                    layoutSize: '100%',
                    zoom: 1,
                    label: {
                        normal: {
                            //静态的时候展示样式
                            show: true, //是否显示地图省份得名称
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                            },
                        },
                        emphasis: {
                            //动态展示的样式
                            color: '#fff',
                        },
                    },
                    // geoIndex: 0,
                    map: 'china',
                    tooltip: {
                        trigger: 'item',
                        appendToBody: false,
                        backgroundColor: 'transparent',
                        borderColor: 'transparent',
                        extraCssText: 'z-index:100;color:#fff;',
                        confine: true, //是否将 tooltip 框限制在图表的区域内
                        formatter: function (params: any) {
                            //根据业务自己拓展要显示的内容
                            var res = ''
                            res = `<div style="box-shadow: 0 0 10px #3BD9D9; padding: 10px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -150%); border-radius: 4px; border: 1px solid #04b9ff; background: linear-gradient(to bottom,  #51bfd4 0%,rgba(35,90,178,.8) 100%);">
                                <div style='color:#fff; font-size: 16px; font-weight: bold'>${params?.name}</div>
                                <div style="display: flex; gap: 20px; align-items: center; padding-top: 6px;">
                                    <div>
                                        <div style="color:#7FFBFD;font-size: 12px;">客户数</div>
                                        <div style="font-size: 20px;">${params?.data?.companyCount ?? 0}</div>
                                    </div>
                                    <div>
                                        <div style="color:#7FFBFD;font-size: 12px;">使用人数</div>
                                        <div style="font-size: 20px;">${params?.data?.peopleCount ?? 0}</div>
                                    </div>
                                </div>
                            </div>`
                            return res
                        },
                    },
                    itemStyle: {

                        normal: {
                            label: {
                                show: true,
                                color: '#fff',
                            },
                            color: '#fff',
                            borderColor: '#32CBE0',
                            borderWidth: 1.5,
                            // areaColor: {
                            //     image: base64img,
                            //     repeat: 'no-repeat'
                            // },
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 1000,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0.5,
                                        color: '#0D59C1', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#53C9C7', // 100% 处的颜色
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff',
                            },
                            borderWidth: 3,
                            borderColor: 'rgba(255, 230, 175,0.8)',
                            shadowColor: 'rgba(255, 230, 175,0.5)',
                            shadowBlur: 30,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                                backgroundColor: 'transparent',
                            },
                            areaColor: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: '#1cfbfe',
                                    },
                                    {
                                        offset: 1,
                                        color: '#3348e7',
                                    },
                                ],
                                false
                            ),
                        },
                    },
                    data: mapData,
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        brushType: 'fill',
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        formatter: function (obj: any) {
                            return obj.name
                        }
                    },
                    symbolSize: function (val: any) {
                        // var value = val[2]
                        // if (value < max) {
                        //     return 15
                        // }
                        return 20
                    },
                    showEffectOn: 'render', //加载完毕显示特效
                    itemStyle: {
                        normal: {
                            color: '#FEBE13', // 圆点的颜色
                            shadowBlur: 10,
                            shadowColor: '#333',
                        },
                    },
                    zlevel: 6,
                    data: pointData,
                },
                // {
                //     type: 'custom',
                //     coordinateSystem: 'geo',
                //     renderItem: function (params: any, api: any) {
                //         //具体实现自定义图标的方法
                //         return {
                //             type: 'image',
                //             style: {
                //                 // image: uploadedDataURL, // 自定义的图片地址
                //                 x:
                //                     api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[0] -
                //                     6, // 数据的设置
                //                 y:
                //                     api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[1] -
                //                     34,
                //             },
                //         }
                //     },
                //     zlevel: 10,
                //     data: pointData,
                // },
            ],
        }
    )
    function autoPlay() {
        myChart?.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
        })
        myChart?.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: count,
        })
        myChart?.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: count,
        })
        count++
        if (count >= biMapData.value.length) {
            count = 0
        }
    }

    let count = 0
    let timer = null
    autoPlay()
    timer && clearInterval(timer)
    timer = setInterval(() => {
        autoPlay()
    }, 3000)
}
const resizeChart = () => {
    if (myChart) {
        myChart.resize()
    }
}

const getBiMapData = async () => {
    return await getBiMapDataApi()
}
const setBiMap = async () => {
    biMapData.value = await getBiMapData()
    if (biMapData?.value?.length) {
        biMapData.value.forEach(i => {
            i.name = i.area
            i.value = [i.companyCount, i.peopleCount]
        })
        setOption(biMapData.value)
    }
}
const screenWidth = ref<any>(null)
const screenHeight = ref<any>(null)
onMounted(async () => {
    myChart = echarts.init(chartRef.value)
    await setBiMap()
    screenWidth.value = document.body.clientWidth
    screenWidth.value = document.body.clientHeight
    window.onresize = () => {
        return (() => {
            screenWidth.value = document.body.clientWidth
            screenHeight.value = document.body.clientHeight
        })()
    }
})
watch(() => screenHeight.value, (New, Old) => {
    if (New) {
        console.log(New, '1111hudgjghjkudjk')
        myChart?.resize()
    }
})
watch(() => screenWidth.value, (New, Old) => {
    if (New) {
        console.log(New, '1111hudgjghjkudjk')
        myChart?.resize()
    }
})
defineExpose({
    resizeChart
})
</script>

<style lang="scss" scoped>
:deep(.custom-tooltip-box) {
    padding: 8px 16px !important;
    background: radial-gradient(46% 1% at 50% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0.01) 100%), radial-gradient(65% 3% at 50% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0.01) 100%), radial-gradient(112% 15% at 50% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0.01) 100%), linear-gradient(180deg, rgba(7, 27, 67, 0.1) 0%, rgba(13, 46, 89, 0.2) 100%) !important;
    border: 1px solid !important;
    border-image: linear-gradient(180deg, rgba(168, 242, 247, 0.5176) 0%, #00FFF9 100%) 0.86 !important;
}

.map {
    ::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    flex: 1;
    width: 100%;
    // height: calc(100vh - 400px);
    // min-height: 500px;
    // padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.fs-30 {
    font-size: 30px;
}

.border-out {
    height: 45px;
    box-sizing: border-box;
    padding: 3px 0;
    border-top: 0.6px solid rgba(59, 150, 224, 0.5);
    border-bottom: 0.6px solid rgba(59, 150, 224, 0.5);
    display: flex;
    align-items: center;

    .border-inner {
        border-bottom: 0.3px solid rgba(151, 212, 247, 0.1);
        border-top: 0.3px solid rgba(151, 212, 247, 0.1);
        width: 100%;
        height: 38px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
}

.titlebox2 {
    z-index: 999;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    top: 75px;
    left: 0;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.punctuation {
    margin-left: -6px;
    margin-right: -6px;
    color: #FFFFFF;
    font-size: 50px;
    font-weight: 700;
}

.chunknum {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform: rotate(-90deg);
    font-size: 50px;
    color: #FFFFFF;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chunk {
    width: 60px;
    transform: rotate(90deg);
    height: 40px;
    background: radial-gradient(52% 19% at 50% 0%, rgba(0, 208, 255, 0.5) 0%, rgba(31, 133, 255, 0) 100%), radial-gradient(52% 17% at 49% 100%, rgba(0, 208, 255, 0.5) 0%, rgba(31, 133, 255, 0) 100%), linear-gradient(180deg, rgba(3, 129, 255, 0.1) 0%, rgba(43, 137, 255, 0.2) 100%);
    backdrop-filter: blur(6.53px);
}

.fc-ffffff {
    color: #FFFFFF;
}

.fw-700 {
    font-weight: 700;
}

.w-24-h-20 {
    width: 24px;
    height: 20px;
}

.titlebox1 {
    // z-index: 999;
    // position: absolute;
    width: 100%;
    box-sizing: border-box;
    // top: 0;
    // left: 0;
    // display: flex;
    // align-items: center;
    // justify-content: center;
}

.titleone {
    background-image: url('./assets/img/center-title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 20px;
}

.centermsg {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    // height: 100%;
    height: calc(100vh - 290px);
}
</style>